<template>
  <div class='color-page'>
    <div class='color-main'>
      <canvas id='colorcanvas' :width="init.width" :height="init.height"></canvas>
      <div class='c-blankbox'>
        <div class='c-cbox'>
          <div class='c-cbox-main' :style='{background: color}'></div>
        </div>
      </div>
      
      <img class='c-close' @click="close" src='../../../assets/imgs/common/close.png' />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: ''
  },
  data() {
    return {
      // init: {
      //   width: 200,
      //   height: 191
      // },
      canvas: null,
      ctx: null,
      // rgba: '',
      color: ''
    }
  },
  watch: {
    value(val) {
      this.color = val
    }
  },
  created() {
    this.init = {
      width: window.global.innerHeight * 0.35,
      height: window.global.innerHeight * 0.35,
    }
  },
  beforeDestroy() {
  },
  mounted() {
    if (this.value) {
      this.color = this.value
    }
    // this.$nextTick(() => {
      this.initCanvas()
      // this.canvas.addEventListener("mousemove", this.pick.bind(this))
      this.canvas.addEventListener("click", this.selectColor.bind(this))
    // })
  },
  methods: {
    initCanvas () {
      let img = new Image();
      img.src = require(`../../../assets/imgs/common/color.png`);
      this.canvas = document.querySelector('#colorcanvas');
      this.ctx = this.canvas.getContext("2d");
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0, this.init.width, this.init.height);
        img.style.display="none"
      }
    },
    getStyles(obj){//兼容FF，IE10; IE9及以下未测试
      return document.defaultView.getComputedStyle(obj);
    },
    getCanvasPos(e) {//获取鼠标在canvas上的坐标  
      let rect = this.canvas.getBoundingClientRect(); 
      let leftB = parseInt(this.getStyles(this.canvas).borderLeftWidth);//获取的是样式，需要转换为数值
      let topB = parseInt(this.getStyles(this.canvas).borderTopWidth);
      return {   
        x: (e.clientX - rect.left) - leftB,  
        y: (e.clientY - rect.top) - topB 
      };  
    },

    pick(event) {
      let { x, y } = this.getCanvasPos(event)
      // console.log('x, y:', x, y)
      // let x = event.layerX;
      // let y = event.layerY;
      // console.log('event >> ', event)
      let pixel = this.ctx.getImageData(x, y, 1, 1);
      let data = pixel.data;
      this.color = 'rgba('+data[0]+','+data[1]+','+data[2]+','+data[3]/255+')';
      // let dColor = data[2] + 256 * data[1] + 65536 * data[0];
      // console.log('dcolor: ', dColor)
      // if (dColor.toString(16).length === 6) {
      //   this.color = '#' +　dColor.toString(16)
      // }

    },
    selectColor(event) {

      // let x = event.layerX;
      // let y = event.layerY;
      let { x, y } = this.getCanvasPos(event)
      let pixel = this.ctx.getImageData(x, y, 1, 1);
      let data = pixel.data;
      this.color = 'rgba('+data[0]+','+data[1]+','+data[2]+','+data[3]/255+')';
      // let dColor = data[2] + 256 * data[1] + 65536 * data[0];
      // if (dColor.toString(16).length === 6) {
      //   this.color = '#' +　dColor.toString(16)
      // }

      // console.log('this.color: ', this.color)
      this.$emit('input', this.color)
      this.$emit('change', this.color)
    },
    close() {
      this.$emit('close')
    }
  }
};
</script>

<style lang="scss">
.color-page {
  bottom: 12%;
  left: 10%;
  // border: 1px solid #BFBF0B;
  position: absolute;
  z-index: 16;
  border-radius: 50%;

  .c-close {
    position: absolute;
    top: 5.8%;
    right: 0;
    width: 20%;
    height: 20%;
    z-index: 10;
  }

  .color-main {
    margin: 0 auto;
    position: relative;
    // border: 3px solid #FCCE00;
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }

  #colorcanvas {
    margin: 0 auto;
    position: relative;
  }

  .c-blankbox {
    width: 59%;
    height: 59%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
  }

  .c-cbox {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    padding: 3px;
    z-index: 5;
    background: #fff;
  }

  .c-cbox-main {
    border-radius: 3px;
    width: 100%;
    height: 100%;
  }

}
</style>
